<template>
  <div class="register" :style="{width: fullWidth+'px', height:fullHeight+'px',backgroundColor:'#333'}">
    <ul :style="{width: fullWidth+'px'}">
      <li><a class="active" href="#about">About</a></li>
      <li><a href="#game">Game</a></li>
      <li><a href="#faq">FaQ</a></li>
      <li><a href="#contact">Contact</a></li>
      <li style="float: right">
        <img src="../assets/pic4.png"  id="pic4"/>
      </li>
    </ul>
    <div class="img_box"  id="pic1" :style="{width: fullWidth+'px' }" ></div>
    <div class="img_box" id="pic2" :style="{width: fullWidth+'px',top: fullHeight-9+'px'}"  ></div><a name="about"></a>
    <div  class="content">

      <video width="400" height="300" autoplay loop controls>
        <source src="../assets/Title.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>

      <div class="txtarea" :style="{width: fullWidth*2/3+'px', align: 'left' }" >
        <div class="subttl" >我们是谁?</div><a name="game"></a>
        <div class="subtxt">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我们是Noobs of Seacrest County(NSC)，一个基于兴趣成立的极品飞车14重制版及原版车队，在竞速和MW（头号通缉犯）模式均有涉猎，并不限于此。尽管由于人数问题，车队暂时不考虑招新，但公开群仍然欢迎所有人的加入。
          在这里，你可以找到关于极品飞车14的游戏技巧，游戏Mod以及涂装制作，以及其他游戏的同好，包括但不限于其他系列极品飞车，使命召唤，极限竞速地平线，L4D2等等，并与大家畅所欲言。我们欢迎你的到来 :)
        </div>
      </div>
      <div>
        <br>
      </div><div>
      <br>
    </div><div>
      <br>
    </div><a name="faq"></a>
      <div class="txtarea" :style="{width: fullWidth*2/3+'px', align: 'left' }" >
        <div class="subttl">关于极品飞车14热力追踪重制版</div>
        <div class="subtxt">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《极品飞车14：热力追踪》是《极品飞车》系列广受好评的一代作品，玩家可以扮演警察或赛车手在激烈的追逐战中驰骋赛道，还有各种赛车道具助力玩家闯关。 复刻版由Stellar Entertainment制作（此前他们曾制作过《火爆狂飙：天堂》重制版【Remastered】），相比于电脑原版《热力追踪》复刻版加入了以往在主机上发行的全部的游戏DLC，另外一些还会新增六小时的额外游戏内容（超过30个挑战）和跨平台联机功能。
        </div>
        <div class="subtxt">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通过Origin平台，你可以进行好友的添加并参与线上竞速比赛与MW竞逐。通常情况下，频繁更改的名称将不能被搜索到，进行设置后，你可以通过搜索邮箱查找好友。
        </div>

      </div>
      <div>
        <br>
      </div><div>
      <br>
    </div><div>
      <br>
    </div>
      <div class="txtarea" :style="{width: fullWidth*2/3+'px', align: 'left' }" >
        <div class="subttl">常见问题</div><a name="contact"></a>
        <div class="subtxt">
          <ul style="position: relative" class="innersub">
            <li style="color: sandybrown">1、我是新手，入门时我需要注意什么？
              <div class="subtxt">理解游戏小漂的机制，学习大佬的视频，在很短的时间内，就会在速度上有较大提升。单机赛事能够帮助你初步了解这个游戏，但是线上进一步的进步才能算真正的入门。
                无论是手柄还是键盘，都可以达到顶尖水准，也都各有优劣。真正制约速度的，是每个人对游戏的理解程度和熟练程度。
              </div>
            </li>

            <li style="color: #4EE2EC">2、我已经入门了，我该如何进一步练习？
              <div class="subtxt">
                选择特定赛事进行练习，能够帮助你加深对小漂的理解。其中Ultimately Open赛事是最基础，也是练习最为广泛的。对于超级，梦幻，炒饭三个系列，分别使用Meta 达到如下时间即算入门<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;M-B sl65 AMG:1:27:49<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lamborghini Reventon:1:29:49<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;McLaren F1:1:20:49
              </div>


            </li>

            <li style="color: sandybrown">3、一起线上联机，我需要什么基础？
              <div class="subtxt">想要拥有足够的游戏体验，就必须拥有一定的速度基础，最好是能够达到入门标准。在这个基础上，线上竞速讲究配合与让车，需要一定的经验；线上MW，需要一定的适应以掌握路障摆放，铺钉与对抗技巧。除此之外没有必须要求，希望你能加入我们，享受一同游玩的快乐。
              </div>

            </li>

          </ul>
        </div>
      </div>
      <div>
        <br>
      </div><div>
      <br>
    </div><div>
      <br>
    </div>
      <div class="txtarea" :style="{width: fullWidth*2/3+'px', align: 'left' }" >
        <div class="subttl">相关链接</div>

        <div class="subtxt">
          <div>

            <a href="https://jq.qq.com/?_wv=1027&k=4C5Q3Zkg" style="color:white;">在哪里可以找到我们</a>
          </div>
          <div><a href="https://pan.baidu.com/s/1Y97b3mU0QmED47FgzhlU6A" style="color:white;">极品飞车14教程（By TZHeat）</a>     提取码3xs4</div>
          <div>
            <a href="https://jq.qq.com/?_wv=1027&k=nT9JYSVZ" style="color:white;">国内活跃人数最多，水平最高的极品飞车14交流大群</a>
          </div>
          <div>
            <a href="https://www.bilibili.com/video/BV1dP4y1x7up/?spm_id_from=333.999.0.0" style="color:white;">MW模式的第一步：铺钉技巧</a>
          </div>
          <div>
            <a href="https://www.bilibili.com/video/BV1xR4y1R7NW/?spm_id_from=333.999.0.0" style="color:white;">一代传奇的回归：Stirling Moss Mod</a>
          </div>
          <div>
            <a href="https://www.bilibili.com/video/BV1zZ4y1y7FH/?spm_id_from=333.999.0.0" style="color:white;">涂装的制作</a>
          </div>
        </div>
      </div>
      <div>
        <br>
      </div><div>
      <br>
    </div><div>
      <br>
    </div><div>
      <br>
    </div>
      <div class="down">
        Leader:
        <a href="https://space.bilibili.com/227860718/"><img src="../assets/72.jpg" height="100" id="profile"/></a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Co-Leader:
        <a href="https://space.bilibili.com/13459256"><img src="../assets/me.jpg" height="100" id="profile"/></a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://space.bilibili.com/525246097/?spm_id_from=333.999.0.0"><img src="../assets/li.jpg" height="100" id="profile"/></a>
        <img src="../assets/icon.png" height="150" id="pic3"/>

      </div>
      </div>





  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      //保存数据，实现动态渲染
      //注意：这里没有带‘px’单位，在上面添加动态样式时，需要加上px单位！！！
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight

    }
  },
  methods: {
    //定义数据获取方法
    handleResize () {
      this.fullWidth = document.documentElement.clientWidth
      this.fullHeight = document.documentElement.clientHeight
    }
  },
  //两个生命周期中监听窗口大小变化
  //参数1：监听的事件
  //参数2：一个回调函数，用于赋值
  created () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount () {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.register {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  overflow-y: scroll;
}
.img_box {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 101%;
  height: 101%;
  z-index: -1;
  opacity: 0.35;
  background-attachment:fixed
}

.txtarea{
  background-color:rgba(133,0,255,0.6)	;
  position: relative;
  margin:0 auto;
  border: 5px solid white;
  border-radius: 10px;
  padding: 30px 30px;
}

.subttl{
  text-align: left;
  font-family: 华文中宋,ui-serif;
  color: #4EE2EC;
  font-size: 30px;
}
#pic1{
background-image: url("../assets/bk2.png");
}

#pic2{
  background-image: url("../assets/28.png");
}

#pic3{
  position: static;
  bottom: 0;
  float: right;
  height: 150px;
}
#pic4{
  position: static;
  bottom: 0;
  float: left;
  height: 46px;

}

#profile{
  position: relative;
  top: 25px;
  border-radius: 50%;
  overflow:hidden;
  border: 3px;
}
.content{
  position: relative;
  z-index: 1;
  top:60px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  z-index: 2;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: rgba(133,0,255,0.6);
}

.subtxt{
  text-align: left;
  color: white;
}

.innersub{
  background-color: rgba(0,0,0,0);
}

.down{
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  z-index: 2;
  height: 150px;
  bottom: 0;
  position: static;
}

</style>